$btns: (
  1: (
    'default' #6c6d71
  ),
  2: (
    'primary' #409eff
  ),
  3: (
    'success' #67c23a
  ),
  4: (
    'warning' #e39827
  ),
  5: (
    'danger' #f54343
  )
);

@mixin btns-to($name) {
  $bp: map-get($btns, $name);
  $type: nth($bp, 1);
  $color: nth($bp, 2);

  &.#{$type} {
    // $color: $col;
    background: $color;

    &:hover {
      background: lighten($color, 10%);
    }

    &:active {
      background: darken($color, 10%);
    }

    &:disabled {
      background: lighten($color, 20%);
      color: darken($color, 15%);
    }
  }
}

.btn {
  color: #fff;
  outline: none;
  border: none;
  cursor: pointer;

  @for $i from 1 through length($btns) {
    @include btns-to($i);
  }
}
